<template>
  <view class="info-modify-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png"></image>
    </view>

    <!-- 表单区域（已上移） -->
    <view class="form-container">
      <!-- 手机号码输入框 -->
      <view class="form-item">
        <image class="item-icon" src="@/img/车联网服务-08我的 -02个人信息-02信息修改-手机号_slices/手机号.png"></image>
        <input 
          class="input-box" 
          type="number" 
          placeholder="请输入手机号码" 
          placeholder-style="color:#ccc"
        />
        <image class="clear-icon" src="@/img/车联网服务-08我的 -02个人信息-02信息修改-手机号_slices/组 5.png" v-if="showClear" @click="clearInput"></image>
      </view>
      <!-- 验证码输入框 + 获取验证码按钮 -->
      <view class="form-item">
        <image class="item-icon" src="@/img/车联网服务-08我的 -02个人信息-02信息修改-手机号_slices/验证码.png"></image>
        <input 
          class="input-box" 
          type="number" 
          placeholder="输入验证码" 
          placeholder-style="color:#ccc"
        />
        <button class="verify-btn">获取验证码</button>
      </view>
      <!-- 提交按钮 -->
      <button class="submit-btn">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showClear: false
    };
  },
  methods: {
    clearInput() {
      console.log("清空输入框");
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.info-modify-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}

/* 顶部导航栏（样式不变） */
.nav-bar {
  position: absolute;
  background-color: #3399ff;
  height: 300rpx;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.back-icon {
  width: 44rpx;
  height: 44rpx;
  z-index: 3;
}

/* 表单容器（核心修改：通过top值上移） */
.form-container {
  position: absolute;
  width: 90%;
  height: auto;
  background-color: white;
  border-radius: 20rpx;
  margin: 100rpx 5% 0 5%;
  z-index: 3;
  padding: 30rpx;
  box-sizing: border-box;
  top: -100rpx; /* 关键修改：从120rpx改为60rpx，向上移动60rpx */
}

/* 表单项样式（不变） */
.form-item {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 15rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.item-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}

.input-box {
  flex: 1;
  height: 60rpx;
  font-size: 32rpx;
  color: #333;
}

.clear-icon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 20rpx;
}

.verify-btn {
  background-color: #3399ff;
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
  margin-left: 20rpx;
  border: none;
}

.verify-btn::after {
  border: none;
}

.submit-btn {
  background-color: #3399ff;
  color: #fff;
  font-size: 34rpx;
  padding: 25rpx 0;
  border-radius: 20rpx;
  width: 100%;
  margin-top: 20rpx;
  border: none;
}

.submit-btn::after {
  border: none;
}
</style>